<template>
    <el-drawer title="我是标题" :visible.sync="dialogVisible" :with-header="false" class="demand_box" size='70%' @close="resetForm()">
        <div class="flexbox flexcolumn height_100">
            <div class="demand_head flexbox flexcenter flexbetween">
                <span class="demand_title">{{title?title:'素材计划详情'}}</span>
                <span class="icon_btn icon_btn_32" @click="resetForm()"><img src="../../assets/img/close_check.svg" alt=""></span>
            </div>
            <div class="demand_center flex" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                <el-table :data="tableData" class="com_table" height="100%" @sort-change='sortChange'>
                    <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                        <img src="../../assets/img/null_icon.svg" alt="">
                        <div class="font_13 color_03">暂无数据</div>
                    </div>
                    <el-table-column prop="group_name" label="广告组名称" min-width="170">
                    </el-table-column>
                    <el-table-column prop="campaign_id" label="广告组id" min-width="170">
                    </el-table-column>
                    <el-table-column prop="ad_id" label="计划ID" min-width="170">
                    </el-table-column>
                    <el-table-column prop="creative_id" label="创意ID" min-width="170">
                    </el-table-column>
                    <el-table-column prop="video_id" label="视频ID" min-width="300">
                    </el-table-column>
                    <el-table-column prop="stat_cost" label="消耗" min-width="100" sortable="custom">
                    </el-table-column>
                    <el-table-column prop="pay_order_amount" label="GMV" min-width="100" sortable="custom">
                    </el-table-column>
                    <el-table-column prop="roi" label="ROI" width="130" sortable="custom">
                        <template slot-scope="scope">
                            {{scope.row.roi | keepTwoNumT}}
                        </template>
                    </el-table-column>
                     <el-table-column prop="batch_num" label="数据产生日期" min-width="150">
                    </el-table-column>
                </el-table>
            </div>
            <div class="demand_footer flexbox flexcenter">
                <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
                </el-pagination>
            </div>
        </div>
    </el-drawer>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            loading: false,
            dialogVisible: false,
            title: "",
            queryInfo: {
                material_id: "",
                campaign_id: "",
                day: "",
                page: 1,
                limit: 20,
                field:"",
                order:"",
            },
            total: 0,
            setpage: 1,
            tableData: [],
        };
    },
    created() {
        this.$bus.on("liveGroupDetails", (value) => {
            this.dialogVisible = value.dialogVsb;
            this.title = value.title;
            this.queryInfo.material_id = value.material_id;
            this.queryInfo.campaign_id = value.campaign_id;
            this.queryInfo.day = value.day;
            this.getDataList(1);
        });
    },
    beforeDestroy() {
        this.$bus.off("liveGroupDetails");
    },
    methods: {
        //获取广告组
        async getDataList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "videotest/Livetesting/group_info",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
            }
        },

        // 排序
        sortChange(column) {
            this.queryInfo.field = "";
            this.queryInfo.order = "";
            if (!column.order) {
                this.getDataList(this.setpage);
                return;
            } else {
                var order = column.order.slice(0, -6);
            }
            this.queryInfo.order = order;
            this.queryInfo.field = column.prop;
            this.getDataList(1);
        },

        // 关闭重置表单
        resetForm() {
            this.tableData = [];
            this.dialogVisible = false;
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDataList(val);
        },
    },
    components: {},
};
</script>


<style scoped>
</style>
